<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改' " :close-on-click-modal='false'
		:close-on-press-escape='false' :fullscreen='true'>
		<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">

			<!--         <el-form-item label="父需要" prop="pid">
            <el-input v-model="dataForm.pid" placeholder="父需要"></el-input>
          </el-form-item>
          <el-form-item label="类别编码" prop="categorykey">
            <el-input v-model="dataForm.categorykey" placeholder="类别编码"></el-input>
          </el-form-item>
          <el-form-item label="类别名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="类别名称"></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="adduser">
            <el-input v-model="dataForm.adduser" placeholder="创建人"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="addtime">
            <el-input v-model="dataForm.addtime" placeholder="创建时间"></el-input>
          </el-form-item>
          <el-form-item label="修改人" prop="updatuser">
            <el-input v-model="dataForm.updatuser" placeholder="修改人"></el-input>
          </el-form-item>
          <el-form-item label="修改时间" prop="updatetime">
            <el-input v-model="dataForm.updatetime" placeholder="修改时间"></el-input>
          </el-form-item> -->

			<el-form-item label="类别编码" prop="categorykey">
				<el-input size="small" v-model="dataForm.categorykey" placeholder="类别编码"></el-input>
			</el-form-item>
			<el-form-item label="类别名称" prop="name">
				<el-input size="small" v-model="dataForm.name" placeholder="类别名称"></el-input>
			</el-form-item>
			<el-form-item prop="parentName" label="上级类别" class="menu-list">
				<el-popover size="small" v-model:visible="skucategoryListVisible" placement="bottom-start" trigger="click">
					<template #reference>
						<el-input v-model="dataForm.parentName" :readonly="true" placeholder="上级类别">
							<i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()"
								class="el-icon-circle-close el-input__icon"></i>
						</el-input>
					</template>

					<el-tree :data="skucategoryList" :props="{ label: 'name', children: 'children' }" node-key="id"
						ref="skucategoryListTree" :highlight-current="true" :expand-on-click-node="false" accordion
						@current-change="menuListTreeCurrentChangeHandle"></el-tree>
				</el-popover>
			</el-form-item>

		</el-form>
		<template #footer>
			<el-button size="small" @click="visible = false">取消</el-button>
			<el-button size="small" type="primary" @click="dataFormSubmitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		getSkucategoryById,
		putSkucategory,
		postSkucategory,
		getSkucategoryByType
	} from "@/network/lswms/base/Skucategory"
	import {
		ElMessage
	} from 'element-plus'
	import _ from 'lodash'


	export default {
		name: "skucategoryAddOrUpdate",
		emits: ["refreshDataList"],
		setup(props, {
			emit
		}) {
			const visible = ref(false);
			const dataForm = ref({
				id: '',
				pid: 0,
				categorykey: '',
				name: '',
				adduser: '',
				addtime: '',
				updatuser: '',
				updatetime: ''
			});


			const dataRule = reactive({
				pid: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				categorykey: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				name: [{
					required: true,
					message: '必填项不能为空',
					trigger: 'blur'
				}],
				// adduser: [{
				// 	required: true,
				// 	message: '必填项不能为空',
				// 	trigger: 'blur'
				// }],
				// addtime: [{
				// 	required: true,
				// 	message: '必填项不能为空',
				// 	trigger: 'blur'
				// }],
				// updatuser: [{
				// 	required: true,
				// 	message: '必填项不能为空',
				// 	trigger: 'blur'
				// }],
				// updatetime: [{
				// 	required: true,
				// 	message: '必填项不能为空',
				// 	trigger: 'blur'
				// }]
			})

			const dataFormRef = ref(null)

			const init = () => {
				visible.value = true;
				nextTick(function() {
					dataFormRef.value.resetFields();
					dataForm.value.pid = "0";
					dataForm.value.parentName = '一级类别';

					getSkucategoryList().then(
						() => {
							if (dataForm.value.id) {
								getskucategoryInfo();
							}
						}

					)


				})
			}

			const skucategoryList = ref([]);
			const getSkucategoryList = () => {
				return getSkucategoryByType(0)
					.then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						skucategoryList.value = res.data;
					})
					.catch(function() {});
			}
			// const dataFormRef = ref(null);
			const skucategoryListTree = ref(null)


			const getskucategoryInfo = () => {
				getSkucategoryById(dataForm.value.id).then(function(res) {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					dataForm.value = _.assignIn({}, dataForm.value, res.data);
					if (dataForm.value.pid === "0") {
						return deptListTreeSetDefaultHandle();
					}
					skucategoryListTree.setCurrentKey(dataForm.value.pid);
				}).catch((err) => {});
			}

			// 上级菜单树, 设置默认值
			const deptListTreeSetDefaultHandle = () => {
				dataForm.value.pid = "0";
				dataForm.value.parentName = '一级类别';
			}

			const skucategoryListVisible = ref(false);
			// 上级菜单树, 选中
			const menuListTreeCurrentChangeHandle = (data) => {
				dataForm.value.pid = data.id;
				dataForm.value.parentName = data.name;
				skucategoryListVisible.value = false;
			}

			// 表单提交
			const dataFormSubmitHandle = _.debounce(() => {
				dataFormRef.value.validate(function(valid) {
					if (!valid) {
						return false;
					}

					let qing = () => {
						return !dataForm.value.id ? postSkucategory(dataForm.value) : putSkucategory(
							dataForm.value)
					}
					qing().then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								visible.value = false
								emit('refreshDataList')
							}
						})
					}).catch(function() {});

				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})

			return {
				visible,
				dataForm,
				dataRule,
				init,
				dataFormSubmitHandle,
				dataFormRef,
				menuListTreeCurrentChangeHandle,
				skucategoryListVisible,
				deptListTreeSetDefaultHandle,
				skucategoryList,
				getSkucategoryList,
				skucategoryListTree,
				getskucategoryInfo
			}
		},


	}
</script>

<style scoped>

</style>
